<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
				#cont{
			width: 400px;
			height: 400px;
			border: 1px solid aqua;
			position: relative;
			margin: 100px auto;
			/* overflow: hidden; */
			background-image: url('./gold.jpg');
		}
		#main{
			width: 400px;
			height: 400px;
			/* border: 1px solid lime; */
			position: relative;
			top: -100px;
		}
		.row{
			height: 100px;
		}
		.row div{
			width: 98px;
			height: 98px;
			border: 1px solid fuchsia;
			float: left;
		}
		.black{
			background-image: url('./mn.png');
		}
		body{
			color: red;
			text-align: center;
			background-image: url('./brushed.jpg') ;
		}

	</style>
</head>
<body>
	<h1>别踩白块:搭建框架</h1>
	<h2 id="sc">0</h2>
	<div id="cont">
		<div id="main"></div>
	</div>
</body>
</html>
<script type="text/javascript">
	var main = document.getElementById('main');//找到最外层的div
	var clock = null; //setInterval()的ID值
	var speed = 2;   //每次循环加的top的值
	var state = true; //游戏的状态

	//获取外部style的属性的值
	//el 想要获取的对象 
	//attr style中的属性
	function getStyle(el,attr){
		return el.currentSyle ? el.currentStyle[attr] : getComputedStyle(el,null)[attr];
	}

	//创建一个div
	//className div里面的类名
	function cDiv(className){
		//创建一个div对象
		var div = document.createElement('div');
		if(className){
			div.className = className;
		}
		return div;
	}

	//生成一行div
	function cRow(){
		//生成1-4以内的随机数
		var ind = Math.floor(Math.random()*4);
		//创建一个变量是生成一个类名为row的div
		var row = cDiv('row');
		//创建一行以内的四个div
		for(var i=0; i<4; i++){
			if(i == ind){
				//创建一个变量类名为black的div
				var t = cDiv('black');
				row.appendChild(t);
			}else{
				var t = cDiv();
				row.appendChild(t);
			}
		}

		//向main这个div插入子div
		if(main,firstChild){
			mian.insertBefore(row,main.firstChild);
		}else{
			main.appendChild(row);
		}
		//设置pass的状态是假
		row.pass = false
	}

	//让div运动起来
	function init(){
		//循环 创建四行div
		for(var i=0; i<4; i++){
			cRow();
		}

		//鼠标点击
		main.onclick = function(ev){
			//如果状态等于假就停止
			if(state == false){
				return;
			}
			//捕捉当前事件作用的对象
			ev.target = ev.target || ev.srcElement;
			if(ev.target.className == ''){
				//如果你点击的方块为空就停止
				fail()
			}else{
				//找到计分的对象
				var score = document.getElementById('sc');
				//把他的字符串转换成整数每次在加一分
				var sc = parseInt(scor.innerHTML) + 1;
				//在付给这个字符串
				score.innerHTML = sc;

				//判断分数如果超过十分就加速
				if(sc % 10 == 0){
					speed += 2;
				}
				//把点击的方块负空
				ev.target.className = '';
				//把他的父元素的状态改为真
				ev.target.parentNode.pass = true;
			}
		}
		//让div运动起来
		clock = window.setInterval('move()',40);
	}

	//写一个div向下移动的函数
	function move(){
		//如果状态等于假就停止
		if(state == false){
			return;
		}
		//获取ID为main的top值
		var top = getStyle(main,'top');
		//给他字符串转为整数在加每次循环假的值
		top = parseInt(top) + speed;

		//把这个数值加到main的样式中去
		main.style.top = top + 'px';

		if(top > 0){//触底
			//main的最后一个子div
			var lastId = main.children.length - 1;
			if(main.children[lastId].pass == false){
				//游戏失败
				fail();
				return;
			}else{
				
			}
		}
	}
	init();
</script>